<template>
  <div class="password noDrag">
    <input :type="showWord ? 'text' : 'password'" :value="modelValue"
      @input="$emit('update:modelValue', $event.target.value)" :placeholder="placeholder" :maxlength="max" />
    <span @click="showWord = !showWord">
      <el-icon style="color:#ADB3B5">
        <View v-if="showWord" />
        <Hide v-else />
      </el-icon>
    </span>
  </div>
</template>
<script>
import { View, Hide } from '@element-plus/icons-vue'
import { defineComponent, ref } from 'vue';
export default defineComponent({
  components: {
    [Hide.name]: Hide,
    [View.name]: View,
  },
  props: {
    modelValue: {
      default: () => '',
      type: String
    },
    placeholder: {
      default: () => "请输入密码",
      type: String
    },
    max: {
      default: () => 6
    }
  },
  setup () {
    const showWord = ref(false)
    return {
      showWord
    }
  }
})
</script>

<style scoped lang="less">
.password {
  width: 300px;
  background: #F4F4F4;
  display: flex;
  margin-top: 12px;
  height: 48px;
  align-items: center;

  >input {
    background: #F4F4F4;
    flex: 1;
    letter-spacing: 2px;
    padding-left: 12px;
    font-size: 16px;

    font-weight: 500;
    color: #242424;
    max-width: 230px;
    border: none;
    outline: none;
  }

  >span {
    margin-left: auto;
    margin-right: 12px;
  }
}
</style>
